<template>
  <div>
    <p>test{{ state.count }}</p>
    <el-tag> 当前价格{{ curPrice }} </el-tag>
    <el-button @click="add"> + </el-button>
    <el-button @click="red"> - </el-button>
  </div>
</template>

<script lang="ts">
  import { computed, watch, defineComponent, reactive, toRefs, watchEffect } from "vue";
  const state = reactive({
    count: 0,
  });
  function add() {
    state.count++;
  }
  function red() {
    state.count--;
  }
  watch(
    () => state.count,
    (a, b) => {
      console.log("数据变化了", a, b);
    }
  );

  //   watchEffect(() => {
  //     state.count > 2 && console.log(state.count);
  //   });
  const curPrice = computed(() => {
    return state.count * 10;
  });

  export default defineComponent({
    setup() {
      return {
        state,
        add,
        red,
        curPrice,
      };
    },
  });
</script>

<style lang="scss" scoped></style>
